<template>
  <div class="cart_container">
    <div class="cart_header">我的购物车</div>
    <div class="cart_items_container">
      <div class="item_data" v-for="(item,index) in cartItems" :key="index">
        <!--  -->
        <div>
          <input type="checkbox" @click="onChecked(item)" />
        </div>
        <!--  -->
        <div class="cart_item_img">
          <img :src="item.img" alt />
        </div>
        <!--  -->
        <div class="cart_item_message">
          <div>{{item.title}}</div>
          <div>{{item.introduce}}</div>
        </div>
        <!--  -->
        <div>￥{{item.price}}</div>
        <div>
          <van-stepper v-model="item.count" :checked="item.checked"
          @minus="onMinus(item)"
          @plus="onPlus(item)"/>
        </div>
        <div class="one_total_price">￥{{item.price * item.count}}</div>
        <div>删除</div>
      </div>
    </div>
    <div class="space_container"></div>
    <!-- 总价全选栏 -->
    <div class="cart_bottom">
      <div class="cart_bottom_allchecked">
        <input type="checkbox" @click="onAllChecked" :checked="allSelect" />
        全选
      </div>
      <div class="cart_bottom_totalprice">
        总价
        <font>￥{{totalPrice}}.00</font>
      </div>
      <div class="cart_bottom_button">立即结算</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    cartItems() {
      return this.$store.state.cartItems;
    },
    totalPrice() {
      return this.$store.state.totalPrice;
    },
    allSelect(){
      return this.$store.state.allSelect;
    }
  },
  methods:{
    onChecked(item){
      this.$store.dispatch('CHANGE_CHECKED',{
        id:item.id,
        checked:event.target.checked
      })
    },
    onAllChecked(){
      var status = event.target.checked
      this.$store.dispatch('ALL_CHECKED',status)
    },
    onMinus(item){
      this.$store.dispatch('COUNT_MINUS',item)
    },
    onPlus(item){
      this.$store.dispatch('COUNT_PLUS',item)
    }
  }
};
</script>

<style scoped>
.cart_container {
  width: 100%;
}
.cart_header {
  width: 100%;
  height: 64px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border-bottom: 1px solid gray;
}
.cart_items_container {
  width: 84%;
  margin-left: 8%;
}
.item_data {
  width: 100%;
  height: 200px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  border-top: 10px solid #eee;
}
.cart_item_img img {
  /* width: ; */
  height: 160px;
}
.one_total_price {
  color: red;
}
.cart_bottom {
  margin-left: 8%;
  width: 84%;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0px;
  background-color: #fff;
}
.cart_bottom_allchecked {
  width: 55%;
  height: 60px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.cart_bottom_allchecked input {
  margin-right: 10px;
  margin-left: 10%;
}
.cart_bottom_totalprice {
  width: 25%;
  height: 60px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 10%;
  color: gray;
}
.cart_bottom_totalprice font {
  color: red;
  margin-left: 10px;
}
.cart_bottom_button {
  width: 15%;
  height: 60px;
  background-color: red;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.space_container {
  width: 100%;
  height: 60px;
}

@media screen and (max-width: 768px){
    
}
</style>
